<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'服务'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight = "18">
            <div class="analyItem">
                <p class="analyItemTit tx-center">科目详情</p>
                <div class="analyItemCon">
                    <div class="col-md-12 clearfix">
                        <UE :content=content :config=config ref="ue" :id=ueid></UE>
                    </div>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <div class="tx-center pt10 pb10">
                        <input type="button" class="uiBtn-normal uiBtn-blue" value="提交" @click="submitDate()" v-if="isSubmit">
                        <input type="button" class="uiBtn-normal uiBtn-blue ml10" value="预览" @click="clickFourShow(1)">
                    </div>
                </div>
            </div>
        </div>
        <!-- 四段渲染容器 -->
        <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <edit-four v-if="fourIndex === 1" :key="1" :content="fourContent"></edit-four>
        </transition-group>
    </div>
</template>
<script>
import { Base64 } from 'js-base64'
import UE from '@modules/MaterPersonnel/Common/Components/ueditor/index.vue'
import { mapMutations, mapGetters } from 'vuex'
import { saveUeditorText, findUeditorText } from '../../Resources/Api'
import editFour from './four/editFour'

export default {
    components: {
        UE,
        editFour
    },
    data () {
        return {
            name: '', // 三段标签
            status: 2, // 提交状态
            fourIndex: undefined, // 四段Index
            isSubmit: true, // 按钮
            ueid: 'containerServer', // 不同编辑器必须不同的id
            config: {
                initialFrameWidth: null,
                initialFrameHeight: $('body').height() - 400
            },
            content: '', // 编辑内容
            fourContent: '' // 四段的content
        }
    },
    created () {
        this.isSubmit = !!this.leftInfo.hasOwnProperty('productId')
        this.findUeditorText()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 获取编辑器内容
        findUeditorText () {
            let params = {
                uid: this.leftInfo.uid,
                states: this.status
            }
            findUeditorText(params).then(results => {
                if (results.data.Body !== undefined && results.data.StatusCode === 0) {
                    this.content = Base64.decode(results.data.Body.content)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 提交数据
        submitDate () {
            if (!this.leftInfo.hasOwnProperty('productId')) {
                this.$message('您暂时不能提交')
            }
            let content = this.$refs.ue.getUEContent()
            let params = {
                productId: this.leftInfo.productId,
                name: this.name,
                content: Base64.encode(content),
                states: this.status,
                uid: this.leftInfo.uid
            }
            saveUeditorText(params).then(results => {
                if (results.data.StatusCode === 0) {
                    this.isSubmit = false
                    this.setUpDatePlate()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 预览
        clickFourShow (index) {
            this.fourIndex = index
            this.fourContent = this.$refs.ue.getUEContent()
        }
    },
    watch: {
        leftInfo () {
        }
    }
}
</script>
<style lang="scss">
    #edui_fixedlayer {
        z-index: 2000 !important
    }
    .operButton .el-button+.el-button {
        margin-left: 0px
    }
    .width150{
        width: 150px;
    }
    .operButton {
        margin-top: -5px;
    }
</style>
